<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        table tr td{
            border: solid 1px #000;
        }
    </style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;height: 600px;border: solid 1px #000">
    <tr style="height: 100px">
        <td colspan="3" id="tr_top"></td>
    </tr>
    <tr style="height: 400px">
        <td style="width: 100px" id="tr_left"></td>
        <td id="tr_center"></td>
        <td style="width: 100px" id="tr_right"></td>
    </tr>
    <tr style="height: 100px">
        <td colspan="3" id="tr_bottom"></td>
    </tr>
</table>
</body>
<script type="text/javascript" src="../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../release/cetc54.ui.all.js"></script>
<script>
$('#tr_top').resizable({
    handles:'s'
});
$('#tr_bottom').resizable({
    handles:'n'
});
$('#tr_left').resizable({
    handles:'e'
});
$('#tr_right').resizable({
    handles:'w'
});
</script>
</html>